<div style="margin-bottom: 5px;" nz-row nzType="flex">
  <!--<div class="btn-group" style="margin-top: 3px;">-->
  <!--<div class="btn btn-default" *ngFor="let timeData of timeDataArr" [class.active] = 'timeData.dataType === timeDataType' (click)="timeDataChange(timeData.dataType)">{{timeData.name}}</div>-->
  <!--</div>-->
  <nz-button-group>
    <button nz-button [nzType]="'primary'"  *ngFor="let timeData of timeDataArr" [nzGhost]="timeData.dataType !== timeDataType" nzSize="large" (click)="timeDataChange(timeData.dataType)">
      <span>{{timeData.name}}</span>
    </button>
  </nz-button-group>
  <div style="display: inline-block;margin:0 10px;">
    <label>站点：</label>
    <!--[(ngModel)]="selectedOption"-->
    <nz-select style="min-width: 120px;" [(ngModel)]="rangeCode" nzSize="large"  (nzOpenChange) = 'changeSite($event)'>
      <!--<nz-option nzLabel="&#45;&#45;请选择站点&#45;&#45;" nzValue=""></nz-option>-->
      <nz-option
        *ngFor="let site of siteArr"
        [nzLabel]="site.SITENAME"
        [nzValue]="site.RANGECODE"
      >
      </nz-option>
    </nz-select>
  </div>
  <div style="margin-left:10px;line-height: 32px;">
    <span>因子：</span>
  </div>
  <div style="margin-right:10px;" nz-col [nzSpan]="12">
    <nz-dropdown nzTrigger="hover" [nzClickHide]="false">
      <div class="ant-dropdown-link" nz-dropdown style="border: 1px solid #aaa4a4;height: 34px;border-radius: 4px;padding: 2px 13px 2px 3px;min-width: 200px;position: relative;">
        <div class="" style="display: inline-block;padding-top: 2px;height: 34px;vertical-align: middle;">
          <ng-template ngFor let-factorData  [ngForOf]="factorDataArr" let-i="index">
            <ng-template ngFor let-factor  [ngForOf]="factorData.factor" let-j="index">
              <button nz-button [nzType]="'primary'" [nzGhost]="true" nzSize="small" *ngIf="factor.checked && (checkFactor.indexOf(factor.value) !== -1)">
                <span>{{factorData.dataType + ' - ' + factor.label}}</span>
                <i class="anticon anticon-close" (click)="updateSingleChecked(factorData, {index: j})"></i>
              </button>
            </ng-template>
          </ng-template>
          <button nz-button [nzType]="'primary'" [nzGhost]="true" nzSize="small" *ngIf="checkFactorArr.length > 3">
            <i class="anticon anticon-ellipsis"></i>
          </button>
        </div>
        <i class="anticon anticon-down" style="position: absolute;top: 10px;right: 3px;"></i>
      </div>
      <div nz-dropdown-custom style="padding: 10px;color: #333;background: #fff;box-shadow: 0 1px 6px rgba(0,0,0,.2)">
        <div *ngFor="let factorData of factorDataArr; index as i">
          <div>
            <label nz-checkbox [(ngModel)]="factorData.allChecked" (ngModelChange)="updateAllChecked(factorData)" [nzIndeterminate]="factorData.indeterminate">
              <span>{{factorData.dataType}}</span>
            </label>
          </div>
          <nz-checkbox-group [(ngModel)]="factorData.factor" style="display: block;margin-left: 22px;" (ngModelChange)="updateSingleChecked(factorData)"></nz-checkbox-group>
        </div>
      </div>
    </nz-dropdown>
  </div>
</div>
<div style="margin-bottom: 10px;">
  <!--[(ngModel)]="_dateRange" [nzDisabledDate]="_disabledDate"-->
  <div style="display: inline-block;">
    <label>开始时间：</label>
    <!--(ngModelChange)="_startDate=$event;_startValueChange()" [ngModel]="_startDate" [nzDisabledDate]="_disabledStartDate" nzShowTime [nzFormat]="'YYYY-MM-DD HH:mm:ss'" [nzPlaceHolder]="'Start date'"-->
    <nz-datepicker
      style="width: 228px;" nzSize="large"
      (ngModelChange)="startDate=$event;startValueChange()"
      [ngModel]="startDate"
      [nzDisabledDate]="disabledStartDate"
      [nzShowTime] = 'showTimeParams'
      [nzFormat]='timeDataType == "hourData"? "YYYY-MM-DD HH:00" : "YYYY-MM-DD"'
      [nzPlaceHolder]="'开始时间'"></nz-datepicker>
  </div>
  <div style="display: inline-block;margin-right: 10px">
    <label>结束时间：</label>
    <nz-datepicker
      style="width: 228px;" nzSize="large"
      (ngModelChange)="endDate=$event;
      endValueChange()"
      [ngModel]="endDate"
      [nzDisabledDate]="disabledEndDate"
      [nzShowTime] = 'showTimeParams'
      [nzFormat]='timeDataType == "hourData"? "YYYY-MM-DD HH:00" : "YYYY-MM-DD"'
      [nzPlaceHolder]="'结束时间'"></nz-datepicker>
  </div>
  <button nz-button [nzType]="'primary'" nzSize="large" (click)="search()" [disabled]="isLoading" >
    <span>查询</span>
  </button>
</div>

<!-- 操作栏-->
<div id="one_operation_correlation" data-role="one-operation"  class="one-operation"></div>

<!-- table栏 -->
<div class="one-table-area one-dependency-table">
  <nz-spin *ngIf="isLoading" style="position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100"  [nzSize]="'large'"></nz-spin>
  <table id="one_table_correlation"></table>
</div>
<div style="position: relative;margin-top: 20px;height: 68px;">
  <div
    style="position: absolute;right: 0;width: 400px;height: 20px;
    background-image: -webkit-linear-gradient(to left, #F8696B, #FCAA78, #FFEB84, #B1D47F, #63BE7B);
    background-image:-ms-linear-gradient(to left, #F8696B, #FCAA78, #FFEB84, #B1D47F, #63BE7B);
    background-image:-ms-moz-gradient(to left, #F8696B, #FCAA78, #FFEB84, #B1D47F, #63BE7B);
    background-image:-o-linear-gradient(to left, #F8696B, #FCAA78, #FFEB84, #B1D47F, #63BE7B);
    background-image:linear-gradient(to left, #F8696B, #FCAA78, #FFEB84, #B1D47F, #63BE7B)"></div>

  <div style="position: absolute;right: 0;top: 22px;width: 400px;">
    <ul class="list-inline">
      <li class="text-center" style="vertical-align: top;width: 52px">
        <div>-1</div>
        <div>负相关</div>
      </li>
      <li class="text-center" style="vertical-align: top;width: 117px">
        <div>-0.5</div>
      </li>
      <li class="text-center" style="vertical-align: top;width: 52px">
        <div>0</div>
        <div>弱相关</div>
      </li>
      <li class="text-center" style="vertical-align: top;width: 116px">
        <div>0.5</div>
      </li>
      <li class="text-center" style="vertical-align: top;width: 52px">
        <div>1</div>
        <div>正相关</div>
      </li>
    </ul>
  </div>
</div>

<div id="corLine" style="width: 100%;height: 500px;margin-top: 10px;"></div>
